<template>
  <Modal v-model:visible="visibleRef" class="Modal-body" :maskStyle="{background:'rgba(0,0,0,0.2)'}"
   :footer="null" :centered="true" width="712px">
    <router-link target="_blank" :to="`/articleDetail/${NoticeDetail.article_id}`">
      <img width="664" height="360" :src="`${api}/a/file/thumb/${NoticeDetail.cover_img_id}`" alt="">
      <p class="nowrap mb0 mt5">
        {{ NoticeDetail.article_title }}
      </p>
    </router-link>
  </Modal>
</template>

<script lang="ts" >
import { defineComponent, toRefs, ref} from "vue";
import { Modal  } from "ant-design-vue";
import { DoubleRightOutlined} from '@ant-design/icons-vue';
import { api } from '/@/utils';
export default defineComponent({
  components: {
    Modal,DoubleRightOutlined
  },
  props: {
    NoticeDetail: {
      type: Object as any,
      default: false
    },
  },
  setup(props) {
    const { NoticeDetail } = toRefs(props);
    const visibleRef = ref(true);

    return {
      visibleRef , NoticeDetail , api
    };
  },
});
</script>



<style lang="less">
.Modal-body{
  .ant-modal-close-x {
    width: 34px;
    height: 34px;
    line-height: 33px;
  }

  .mt5{
    margin-top: 5px;
  }
}
</style>

